import React, { memo, useEffect, useState } from 'react'
import type { FC, ReactNode } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import { routerData } from '../../config'
import type { RouterDataFace } from '../../config'
import { HeaderNavWrapper } from './style'
interface IProps {
  children?: ReactNode
}

const HeaderNav: FC<IProps> = () => {
  const navigate = useNavigate()
  const location = useLocation()

  const [currentPath, setCurrentPath] = useState<string>(location.pathname)
  useEffect(() => {
    setCurrentPath(location.pathname)
  })
  const toRouter = (item: RouterDataFace) => {
    if (item.isAlabel) {
      window.open(item.path)
    } else {
      navigate(item.path)
    }
  }
  return (
    <HeaderNavWrapper>
      {routerData.map((item) => {
        return (
          <div
            className={`nav-item ${
              item.path === currentPath.split('/')[1] ? 'active' : ''
            } ${item.new ? 'hot' : ''}`}
            key={item.name}
            onClick={() => toRouter(item)}
          >
            {item.name}
          </div>
        )
      })}
    </HeaderNavWrapper>
  )
}

export default memo(HeaderNav)
